<template>
	<view >
		<topbar title="设置" jt_c="2" background="background:#222222;color:#fff;"></topbar>
		<view class="content">
			<view class="tx bg dis_f_sb_c">
				<view>头像</view>
				<view class="dis_f_l_c">
					<image class="tx_img" :src="gr_zl.avatar" @click="add_img"></image>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c">
				<view>手机号</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;">{{gr_zl.mobile}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="open(1,gr_zl.realname)">
				<view>真实姓名</view>
				<view class="h_z">{{gr_zl.realname}}</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="open(2,gr_zl.alipay)">
				<view >支付宝收款账号</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;">{{gr_zl.alipay}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="open(3,gr_zl.wechat)">
				<view>微信收款码</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;" >{{gr_zl.wechat}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="open(4,gr_zl.name)">
				<view>昵称</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;">{{gr_zl.name}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="open(5,gr_zl.sign)">
				<view>签名</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;">{{gr_zl.sign}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="show = true">
				<view>性别</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;" >{{gr_zl.sex}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<u-popup v-model="show" mode="center" border-radius="10" width="500" height="140">
				<view class="dis_f_co_l_c sex_popup">
					<view class="dis_f_l_c" @click="change_sex(1)">男</view>
					<view class="dis_f_l_c" @click="change_sex(0)">女</view>
				</view>
			</u-popup>
			<u-popup v-model="zl_xg" mode="center" border-radius="10" width="702" height="140">
				<view class="zl_tc dis_f_co">
					<view>{{zl_title}}</view>
					<view class="dis_f_sb_c">
						<u-input v-model="zl_text"></u-input>
						<view class="qd_btn dis_f_c_c" @click="submit">确定</view>
					</view>
				</view>
			</u-popup>
			<view class="bg info dis_f_sb_c" @click="open(6)">
				<view>年龄</view>
				<view class="h_z dis_f_l_c">
					<view style="margin-right: 24rpx;">{{gr_zl.age}}</view>
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="jump('xg_mm')" style="margin-bottom: 30rpx;">
				<view>修改密码</view>
				<view class="h_z dis_f_l_c">
					<!-- <view style="margin-right: 24rpx;">{{gr_zl.}}</view> -->
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="bg info dis_f_sb_c" @click="jump('zf_mm')" style="margin-bottom: 30rpx;">
				<view>修改支付密码</view>
				<view class="h_z dis_f_l_c">
					<!-- <view style="margin-right: 24rpx;">{{gr_zl.}}</view> -->
					<u-icon name="arrow-right" color="#9A9FA8"></u-icon>
				</view>
			</view>
			<view class="out_btn dis_f_c_c" @click="loginout">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				zl_xg:false,
				zl_text:'',
				zl_title:'',
				gr_zl:{
					img:'',
					tel:'',
					name:'',
					zfb:'',
					vx:'',
					nickname:'',
					sign:'',
					sex:'',
					age:'',
					// password:'********'
				},
				aaaa:0
			};
		},
		onLoad() {
				
				this.getuser()
	
		},
		
		methods:{
			loginout(){
				uni.clearStorageSync()
				setTimeout( () => {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}, 1000)
			},
			
			jump(e){
				this.$.open('/pages/mine/'+e)
			},
			getuser(){
				this.$.ajax(1, 'post', 'index/checktokens', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 9){
						this.$.ti_shi('token已过期，请重新登陆')
					uni.clearStorageSync()
						setTimeout( () => {
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}, 1000)
					return;
					}
					else{
						this.$.ajax(1, 'post', 'index/getuser', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token')
				}, (res) => {
					console.log(res)
					if(res.code == 1){
					this.gr_zl = res.userinfo
					if(res.userinfo.mobile == res.userinfo.name){
						// this.$.open('/pages/mine/she_zhi')
						uni.showModal({
						    title: '提示',
						    content: '请设置您的昵称不能与手机号相同，防止您个人信息泄露',
						    success: function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						        }
						    }
						});
						// uni.confirm()
						// this.$.ti_shi('')
					}
					}
					
				})	
					}
				})
				
			},
			add_img(){
				var that = this
				this.$.add_img(1, this.uid, (res) => {
					console.log(res.id)
					this.$.ajax(1, 'post', 'index/setuser', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						content:res.id,
						type:7
					}, (res) => {
						console.log(res)
						if(res.code == 1){
							this.$.ti_shi(res.msg)
							this.getuser()
						}else{
							this.$.ti_shi(res.msg)
						}
						
					})
				})
			},
			change_sex(e) {
				this.show = false
				this.$.ajax(1, 'post', 'index/setuser', {
					uid:uni.getStorageSync('uid'),
					token:uni.getStorageSync('token'),
					content:e,
					type:9
				}, (res) => {
					console.log(res)
					if(res.code == 1){
						this.$.ti_shi(res.msg)
						this.getuser()
					}else{
						this.$.ti_shi(res.msg)
					}
					
				})
			},
			open(e,i){
				this.zl_xg = true
				this.aaaa = e
				this.zl_text = i
				if(e == 1){
					this.zl_title = '真实姓名'
				}
				if(e == 2){
					this.zl_title = '支付宝收款账号'
				}
				if(e == 3){
					this.zl_title = '微信收款账号'
				}
				if(e == 4){
					this.zl_title = '昵称'
				}
				if(e == 5){
					this.zl_title = '签名'
				}
				if(e == 6){
					this.zl_title = '年龄'
				}
				// if(e == 8){
				// 	this.zl_title = '修改密码'
				// }
				
			},
			submit(){
				let sezhi = ''
				
				
				this.$.ajax(1, 'post', 'index/checktokens', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token')
					}, (res) => {
						console.log(res)
						if(res.code == 9){
							this.$.ti_shi('token已过期，请重新登陆')
						uni.clearStorageSync()
							setTimeout( () => {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}, 1000)
						return;
						}
						else{
							if(this.zl_text != ''){
					this.zl_xg = false
					this.$.ajax(1, 'post', 'index/setuser', {
						uid:uni.getStorageSync('uid'),
						token:uni.getStorageSync('token'),
						content:this.zl_text,
						type:this.aaaa
					}, (res) => {
						console.log(res)
						if(res.code == 1){
							this.$.ti_shi(res.msg)
							this.getuser()
						}else{
							this.$.ti_shi(res.msg)
						}
						
					})
				}else{
					this.$.ti_shi('资料不能为空')
				}
						}
					})
				// console.log(sezhi)
				
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: calc(var(--status-bar-height) + 124rpx) 24rpx 0 24rpx;
		width: 100%;
		.bg{
			background-color: #fff;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);
			border-radius: 20rpx;
			margin-bottom: 18rpx;
		}
		.tx{
			width: 100%;
			height: 152rpx;
			padding: 18rpx 36rpx;
			.tx_img{
				width: 116rpx;
				height: 116rpx;
				border-radius: 50%;
				margin-right: 24rpx;
			}
			
		}
		.info{
			padding: 28rpx 36rpx 26rpx 36rpx;
			.h_z{
				color: #9A9FA8;
			}
		}
		.sex_popup {
		
			view {
				padding: 0 20rpx;
				height: 70rpx;
			}
		}
		.zl_tc{
			padding: 20rpx;
		}
		.qd_btn{
			margin-left: 12rpx;
			background-color: #2979ff;
			color: #fff;
			border-radius: 10rpx;
			width: 80rpx;
			height: 44rpx;
			font-size: 22rpx;
		}
	}
	.out_btn{
		width: 100%;
		height: 88rpx;
		background-color: #FA3534;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		color: #fff;
	}
</style>
